<template>
	<view class="header-box">
		<navbar-module :title="$t('discover.Services-for-a-fee')" @showBubbleBox="showBubbleBox" :type="1" v-if="!navShow" @handleSearch="handleSearch" />
		<view class="search-line" v-else>
			<view class="u-nav-slot" @click="handleShowSidebar">
				<view class="iconfont icon-31liebiao icon-color"></view>
			</view>
			<view class="search-block">
				<view class="iconfont icon-sousuo search-icon"></view>
				<input v-model="searchForm.title" :placeholder="$t('index.search')" placeholder-style="color: #878787;" class="search-input" @confirm="getMainList" />
			</view>
			<view class="iconfont icon-bianji icon-color icon-margin" @click.stop="showBubbleBox"></view>
		</view>
		<!-- tab栏 -->
		<TopPopup labelName="labelName" :show.sync="tagsShow" :labelList="tagList" @change="changeTag"></TopPopup>
		<!-- tab栏 -->
		<u-tabs
			:current="currentIndex"
			:list="tagList"
			keyName="labelName"
			lineWidth="0"
			@change="changeTag"
			:inactiveStyle="{
				background: '#FFFFFF',
				'border-radius': '10rpx',
				padding: '12rpx 20rpx',
				'font-size': '28rpx'
			}"
			:activeStyle="{
				background: '#61BDB2',
				'border-radius': '10rpx',
				color: '#FFFFFF',
				padding: '12rpx 20rpx',
				'font-size': '28rpx'
			}"
			:itemStyle="{
				padding: 0,
				'margin-right': '20rpx'
			}"
		>
			<view slot="right" style="padding-left: 10rpx" @tap="onMoreTag">
				<view class="iconfont icon-31liebiao biao"></view>
			</view>
		</u-tabs>
		<view class="Recent-module">
			<view class="money-select" @click="changeDirection()">
				<view class="select-title">{{ $t('feeServices.remunerationAmount') }}</view>
				<image src="~@/static/image/feeServices/up.png" alt="" v-if="searchForm.isAsc === 'asc'" class="select-direction" mode="heightFix"></image>
				<image src="~@/static/image/feeServices/down.png" alt="" v-else-if="searchForm.isAsc === 'desc'" class="select-direction" mode="heightFix"></image>
				<image src="~@/static/image/feeServices/default.png" alt="" v-else class="select-direction" mode="heightFix"></image>
			</view>
			<view v-if="feeList && feeList.length > 0">
				<view class="item-list" v-for="item in feeList" :key="item.id" @click="toDetailHandle(item)">
					<view class="item-left">
						<view class="price">{{ getCoinName(item.currencyId) }}{{ item.remuneration }}</view>
						<view class="weizhi-view">
							<view class="iconfont icon-weizhi-1 weizhi"></view>
							<view class="center omit">{{ item.workPlace }}</view>
						</view>
					</view>
					<view class="item-left">
						<view class="left-title omit">{{ item.title }}</view>
						<view class="time-tip" v-if="item.allowReferrals === 1">
							<image src="~@/static/image/feeServices/recommend.png" class="people-icon" alt=""></image>
							<view class="tip-style">{{ $t('feeServices.allowReferrals') }}</view>
						</view>
					</view>
					<view class="line"></view>
					<view class="item-center">
						<view class="iconfont icon-jiezhishijian weizhi"></view>
						<view class="center">{{ buildI18nTime(item.deadline) }}</view>
						<view class="sender-top">
							<image :src="item.user.avatarCompress || item.user.avatar || $store.state.normalPic" alt="" class="headshot" mode="aspectFill"></image>
							<view class="sender-name omit">{{ item.user.userName || formatUserName(item.user) }}</view>
						</view>
					</view>
				</view>
			</view>
			<u-empty
				v-else
				:text="$t('feeServices.EmptyDataList')"
				textColor="#878787"
				textSize="14"
				width="104"
				height="100"
				marginTop="80"
				icon="/static/image/bourse/none_order.png"
			></u-empty>
		</view>
		<SidebarModule :show="showSidebar" @closeSidebar="handleCloseSidebar" />
	</view>
</template>

<script>
import NavbarModule from '../../components/NavbarModule.vue';
import { queryRewardList, queryLabelList } from '@/services/feeServices.js';
import { getCurrencyList } from '@/services/bourse.js';
import { buildI18nTime } from '@/utils/date-util.js';
import SidebarModule from '../../components/SidebarModule.vue';
import TopPopup from '@/components/TopPopup.vue';
import { mapState } from 'vuex';

export default {
	computed: {
		...mapState(['token'])
	},
	components: {
		NavbarModule,
		SidebarModule,
		TopPopup
	},
	data() {
		return {
			tagIndex: -1,
			tagList: [],
			searchForm: {
				pageSize: 10,
				pageNum: 1,
				title: null,
				labelId: null,
				status: 1,
				orderByColumn: null,
				isAsc: null
			},
			feeList: [],
			total: 0,
			currencyList: [],
			feePostShow: false,
			language: '',
			navShow: false,
			showSidebar: false,
			tagsShow: false,
			currentIndex: 0
		};
	},
	onLoad() {
		this.language = uni.getLocale();
	},
	async onShow() {
		this.getLabelList();
		await this.getCurrency();
		this.feeList = [];
		this.total = 0;
		this.searchForm.pageNum = 1;
		this.getMainList();
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.feeList = [];
		this.total = 0;
		this.searchForm.pageNum = 1;
		this.getMainList();
	},
	onReachBottom() {
		if (this.total > this.searchForm.pageNum * this.searchForm.pageSize) {
			this.searchForm.pageNum++;
			this.getMainList();
		}
	},
	methods: {
		handleSearch() {
			this.navShow = !this.navShow;
		},
		// 侧边栏
		handleShowSidebar() {
			this.showSidebar = true;
		},
		handleCloseSidebar() {
			this.showSidebar = false;
		},
		//编辑页
		showBubbleBox() {
			if (this.token) {
				uni.navigateTo({
					url: '/pagesDiscover/reward/RewardRelease'
				});
			} else {
				uni.navigateTo({
					url: '/pages/login/Login'
				});
			}
		},
		// 返回上一页
		back() {
			uni.navigateBack();
		},
		toDetailHandle(obj) {
			uni.navigateTo({
				url: `/pagesDiscover/reward/RewardDetail?id=${obj.id}`
			});
		},
		buildI18nTime(value) {
			return buildI18nTime(value);
		},
		refreshList() {
			this.feePostShow = false;
			this.getMainList();
		},
		isToLogin() {
			if (!this.$store.state.token) {
				this.$router.push({
					path: '/login'
				});
				return false;
			}
			return true;
		},
		goToPage(path, query, isLogin) {
			this.$router.push({
				path,
				query
			});
		},
		toDetail(obj) {
			const requireObj = {
				id: obj.id
			};
			this.goToPage('/feeServices/FeeServicesDetail', requireObj);
		},
		// 新增按钮
		addClick() {
			if (!this.isToLogin()) {
				return;
			}
			this.feePostShow = true;
		},
		changeTag(e) {
			this.currentIndex = e.index;
			let index = e.index;
			if (this.tagIndex === index) {
				return;
			}
			this.tagIndex = index;
			this.searchForm.labelId = index === -1 ? null : this.tagList[index].id;
			this.getMainList();
		},
		changeDirection() {
			if (!this.searchForm.isAsc) {
				this.searchForm.isAsc = 'asc';
				this.searchForm.orderByColumn = 'remuneration';
			} else if (this.searchForm.isAsc === 'asc') {
				this.searchForm.isAsc = 'desc';
				this.searchForm.orderByColumn = 'remuneration';
			} else if (this.searchForm.isAsc === 'desc') {
				this.searchForm.isAsc = null;
				this.searchForm.orderByColumn = null;
			}
			this.getMainList();
		},
		async getMainList() {
			const resp = await queryRewardList(this.searchForm);
			uni.stopPullDownRefresh();
			if (resp.result.code === 200) {
				this.total = resp.result.total;
				let list = resp.result.rows.map((item) => {
					return {
						...item,
						workPlace: item.workPlace ? this.getRegionNameList(JSON.parse(item.workPlace)).join(',') : null
					};
				});
				if (this.searchForm.pageNum == 1) {
					this.feeList = list ? list : [];
				} else {
					this.feeList = [...this.feeList, ...list];
				}
			}
		},
		async getCurrency() {
			const resp = await getCurrencyList();
			if (resp.result.code == 200) {
				this.currencyList = resp.result.data;
			}
		},
		getCoinName(currencyId) {
			const coinIndex = this.currencyList.findIndex((value) => String(value.id) === String(currencyId));
			return coinIndex !== -1 ? this.currencyList[coinIndex].symbol : '';
		},
		async getLabelList() {
			const resp = await queryLabelList({
				status: 1,
				orderByColumn: 'weight',
				isAsc: 'desc'
			});
			if (resp.result.code == 200) {
				this.tagList = resp.result.rows.map((item) => {
					item.label = JSON.parse(item.label);
					item.labelName = this.getLabelLangType(item);
					return {
						...item
					};
				});
				this.tagList = [
					{
						id: null,
						labelName: this.$t('feeServices.allTag')
					},
					...this.tagList
				];
			}
		},
		getLabelLangType(obj) {
			if (this.language === 'zh-Hans') {
				return obj.label.cn;
			} else if (this.language === 'en') {
				return obj.label.en;
			} else if (this.language === 'ru') {
				return obj.label.ru;
			}
		},
		onMoreTag() {
			this.tagsShow = true;

			console.log('点击表情111', this.tagList);
		}
	}
};
</script>

<style lang="scss" scoped>
.omit {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	word-wrap: break-word;
	white-space: pre-wrap;
	word-break: break-all;
}

.header-box {
	box-sizing: border-box;
	padding: 30upx;

	.time-tip {
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		height: 44rpx;
		background: rgba(254, 102, 0, 0.1);
		border-radius: 10rpx;
		padding: 0rpx 8rpx;
		white-space: nowrap;

		.people-icon {
			width: 32rpx;
			height: 32rpx;
		}

		.tip-style {
			font-size: 24rpx;
			font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
			font-weight: 400;
			color: #fe6600;
		}
	}

	.money-select {
		width: fit-content;
		display: flex;
		align-items: center;
		cursor: pointer;

		.select-title {
			font-size: 28rpx;
			font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
			font-weight: 400;
			color: #000000;
			line-height: 40rpx;
			margin-right: 10rpx;
			user-select: none;
		}

		.select-direction {
			height: 24rpx;
		}
	}

	.icon-color {
		color: #61bdb2;
		font-size: 40upx;
	}

	.search-line {
		display: flex;
		align-items: center;
		margin-bottom: 38rpx;

		.search-block {
			margin-left: 26rpx;
			width: 100%;
			height: 76upx;
			background: #ffffff;
			border-radius: 38upx;
			box-sizing: border-box;
			padding: 30upx;
			display: flex;
			align-items: center;
			margin-right: 50upx;

			.search-icon {
				color: #878787;
				font-size: 30upx;
			}

			.search-input {
				flex: 1;
				margin-left: 30upx;
				font-size: 26upx;
				font-weight: 400;
				color: #212121;
				line-height: 1em;
			}
		}

		.zuo {
			color: #000000;
			font-size: 40upx;
			margin-right: 15upx;
		}
	}

	.banner-view {
		margin-top: 38upx;
		width: 100%;
		height: 276upx;
		background: #61bdb2;
		border-radius: 20upx;
	}

	.line {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30upx;

		.label {
			display: flex;
			align-items: center;
		}

		.item {
			padding: 12upx 20upx;
			background: #ffffff;
			border-radius: 10upx;
			margin-right: 20upx;
			font-size: 28upx;
			font-weight: 500;
			color: #878787;

			&.active {
				background: #61bdb2;
				color: #ffffff;
			}
		}

		.biao {
			color: #606665;
		}
	}

	.title {
		font-size: 40upx;
		font-weight: 500;
		color: #000000;
		margin-bottom: 20upx;
		margin-top: 30upx;
	}
}

.Recent-module {
	margin-top: 22upx;

	.title {
		font-size: 28upx;
		font-weight: 400;
		color: #000000;
	}

	.item-list {
		padding: 20upx;
		background: #ffffff;
		border-radius: 20upx;
		margin-top: 20upx;
		margin-bottom: 10upx;

		.item-left {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.left-title {
				font-size: 32upx;
				font-weight: 500;
				color: #000000;
			}

			.weizhi-view {
				display: flex;
				align-items: center;
				margin-top: 10upx;

				.weizhi {
					color: #878787;
					font-size: 32upx;
				}

				.center {
					margin-left: 10upx;
					font-size: 24upx;
					font-weight: 400;
					color: #878787;
				}
			}
		}

		.item-center {
			display: flex;
			align-items: center;
			margin-top: 20upx;

			.weizhi {
				color: #878787;
				font-size: 40upx;
			}

			.center {
				margin-left: 10upx;
				font-size: 24upx;
				font-weight: 400;
				color: #878787;
			}

			.Darlene {
				font-size: 24upx;
				font-weight: 400;
				color: #000000;
			}

			.sender-top {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-left: 20rpx;
				flex: 1;

				.headshot {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
				}

				.sender-name {
					width: fit-content;
					max-width: calc(100% - 42rpx);
					font-size: 24rpx;
					font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
					font-weight: 400;
					color: #878787;
					line-height: 36rpx;
					margin-left: 10rpx;
				}
			}
		}

		.price {
			margin-top: 10upx;
			font-size: 32upx;
			font-weight: 500;
			color: #fe6600;
		}

		.line {
			width: 100%;
			height: 2upx;
			background: rgba(0, 0, 0, 0.05);
		}
	}
}
</style>
